
<template>
	<view style="width: 740rpx;padding-left: 5rpx;padding-right: 5rpx;">
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<block v-for="(item, index) in leftList" :key="index">
					<article-waterfall-item :item="item" :index="index"></article-waterfall-item>
				</block>
			</template>
			<template v-slot:right="{rightList}">
				<block v-for="(item, index) in rightList" :key="index">
					<article-waterfall-item :item="item" :index="index"></article-waterfall-item>
				</block>
			</template>
		</u-waterfall>
	</view>
</template>

<script>
	export default {
		name:'article-waterfall-list',
		components: {},
		data() {
			return {
				flowList: []
			}
		},
		props: {},
		computed: {
			//计算属性
		},
		watch: {},
		mounted() {
			//挂载到实例上去之后调用
			this.$nextTick(() => {
				// Code that will run only after the
				// entire view has been rendered
			})
		},
		created() {
			//在实例创建完成后被立即调用
		},
		methods: {
			analyseData(dataList, pageIndex) {
				this.realAnalyseData(dataList, pageIndex);
			},
			realAnalyseData(dataList, pageIndex) {
				if (!dataList || dataList.length == 0) {
					return;
				}
				let realList = new Array();
				for (let i = 0; i < dataList.length; i++) {
					let item = dataList[i];
					realList.push(item);
				}
				if (pageIndex == 1) {
					this.clearFlowList();
					setTimeout(() => {
						//延时，避免重用瀑布流组件不走image的load方法
						this.flowList = this.flowList.concat(realList);
					}, 100);
				} else {
					this.flowList = this.flowList.concat(realList);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clearFlowList() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
